<template>
  <view class="graphicnavigation"
        :style="{
                       'padding': '0px ' + properties.setStyle.pageMargin+'px',
                       'margin': properties.setStyle.pageMarginTop+'px '+' 0px',
                    }"
  >
    <view class="grid-content" :style="{
      'background-color': properties.setStyle.backgroundImage?'':properties.setStyle.backgroundColor,
       'background-image': properties.setStyle.bgImg?'url('+properties.setStyle.bgImg+')':'',
        'border-radius': properties.setStyle.borderRadiusLeftTop+'px ' +  properties.setStyle.borderRadiusRightTop+'px '+  properties.setStyle.borderRadiusLeftBottom+'px '+  properties.setStyle.borderRadiusRightBottom+'px ',
    }">
      <uv-grid :col="properties.setStyle.rowSize"
               :border="false"
               align="center"
               :customStyle="{
                  // 'padding':  '5px 0px',
                  'border-radius': properties.setStyle.borderRadiusLeftTop+'px ' +  properties.setStyle.borderRadiusRightTop+'px '+  properties.setStyle.borderRadiusLeftBottom+'px '+  properties.setStyle.borderRadiusRightBottom+'px ',
                  'background-image':  properties.setStyle.bgImg?properties.setStyle.bgImg:'',
             }"
      >
        <uv-grid-item
            v-for="(item,index) in properties.setStyle.imageList" :key="index" @click="click(item)">
<!--          <uv-icon :customStyle="{paddingTop:20+'rpx',borderRadius:properties.setStyle.borderImgRadius+'px'}" :name="item.src" :size="50"></uv-icon>-->
          <uv-image  :src="item.src" :radius="properties.setStyle.borderImgRadius" :customStyle="{marginTop:'10rpx'}" mode="scaleToFill" width="38" height="38" ></uv-image>

          <text class="grid-text"
                :style="{
                             'font-size':properties.setStyle.textSize +'px',
                              'line-height':(properties.setStyle.textHeight+15) +'px',
                              'color':properties.setStyle.textColor
                            }"
          >{{ item.text }}
          </text>
        </uv-grid-item>
      </uv-grid>
    </view>
  </view>
</template>
<script>
import {mapGetters} from "vuex";
import diyJson from '@/config/diy.js';
//图文导航
export default {
  computed: mapGetters(['isLogin', 'userInfo', 'schoolId']),
  name: "ImgTextNav",
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          "text": "图文导航",
          "setStyle": {
            "text": "图文导航",
            "imageList": [{
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6INtK0AAPkh1IHKIQAALHsgDLdAMAA-Sf489.jpg",
              "text": "积分好物",
              "http": {}
            }, {
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6INtK0AAPkh1IHKIQAALHsgDLdAMAA-Sf489.jpg",
              "text": "我想脱单",
              "http": {},
              "linktype": "10"
            }, {
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6INtK0AAPkh1IHKIQAALHsgDLdAMAA-Sf489.jpg",
              "text": "问题帮助",
              "http": {},
              "linktype": "10"
            }, {
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/WechatIMG49.jpg",
              "text": "快递代拿",
              "http": {},
              "linktype": "10"
            }, {
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6INtK0AAPkh1IHKIQAALHsgDLdAMAA-Sf489.jpg",
              "text": "奶茶代买",
              "http": {},
              "linktype": "10"
            }, {
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6INtK0AAPkh1IHKIQAALHsgDLdAMAA-Sf489.jpg",
              "text": "兼职",
              "http": {}
            }],
            "navigationType": 0,
            "imgStyle": 0,
            "backgroundColor": "rgba(255, 255, 255, 1)",
            "textColor": "rgb(0, 0, 0)",
            "borderRadius": 10,
            "showSize": 3,
            "textHeight": 35,
            "textSize": 14,
            "bgImg": "",
            "borderImgRadius": 50,
            "pageMargin": 12
          }
        }
      }
    },
  },
  data() {
    return {
      diyData: diyJson
    }
  },
  methods: {
    click(item) {
      // console.log("item",item)
      let params="";
      if (item.http.linkParams){
        params = "?params=" + encodeURIComponent(item.http.linkParams);
      }
      // console.log("url",item.http.externalLink + params)
      uni.navigateTo({
        url: item.http.externalLink + params
      })
    }
  },
  onShow() {
    // console.log("---", this.properties)
  }
}
</script>

<style scoped lang="scss">
.grid-content {
}
</style>
